<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<pageTitle :title="pageTitle" :hasBack="true" ></pageTitle>
			
			<!--详情-->
			<detailCard :data="cardData" icon-class="icon-yunzhuji"></detailCard>
			
			<el-tabs v-model="activeTab" type="border-card" style="margin:20px;">
			  <!--<el-tab-pane label="基本信息">
			  	<el-table
				    :data="[pageData]"
				    style="width: 100%;padding: 30px 20px 20px;box-sizing: border-box;">
				    <el-table-column
				      prop="host"
				      label="主机IP"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="creator"
				      label="角色"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="address"
				      label="实例调度限制">
				    </el-table-column>
				    <el-table-column
				      prop="address"
				      label="负载均衡器状态">
				    </el-table-column>
				  </el-table>
			  </el-tab-pane>-->
			    <el-tab-pane label="日志">
						<el-button style="z-index:1000;position:absolute;right:20px;top:10px;" type="info" @click="handleReshLOG">
								刷新
						</el-button>
						<pageLog
							ref="pageLog"
							:options="pageLogOptions"
							></pageLog>
			  	
			  </el-tab-pane>
			  <el-tab-pane label="转发配置">
			  	
			  	<zhuanfaList   ref="zhuanfaList" @command="listCommand"></zhuanfaList>
			  	
			  </el-tab-pane>
			
			</el-tabs>
			
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			<addZFPZDialog
				ref="addZFPZDialog"
				:fzId="id"
				@addSucess="refresh"
				 ></addZFPZDialog>
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
import { fuzaiStatusFilter } from '@/filters/status/index';
import pageTitle from "@/view/layout/components/content/pageTitle";
import detailCard from "@/view/components/card/detailCard";
import zhuanfaList from "./fuzai/zhuanfaList"

import { getFzInfo, getFzListStatus } from "@/service/swagger/HaproxyController";

import addZFPZDialog from "@/view/components/dialog/addZFPZDialog";
// import addZFPZDialog from "./fuzai/addZFPZDialog";

import pageLog from "@/view/components/log/pageLog";
import { searchLogInitIdInfoPage } from "@/service/swagger/LogController";

import { listenner } from "@/utils/statuslistener";

export default {
	components: {
		pageTitle,
		detailCard,
		zhuanfaList,
		addZFPZDialog,
		pageLog,
	},
	data() {
		return {
			// 页面主标题
			pageTitle: "负载详情",
			pageData: {}, // 接口数据
			cardData: null,
			id: this.$route.query.id,

			cardConifg: {
				"name": "名称",
				"createTime": "创建时间",
				"status": "状态",
				"creator": "创建者",
				"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa": "所属集群",
				"remark": "备注",
			},

			ruleData: [],
			activeTab: this.$route.query.activeTab,

			pageLogOptions: {
				autoGetData: true,
				serviceFN: searchLogInitIdInfoPage,
				params: {
					id: this.$route.query.instId,
				}
			},
			ruleForm:{
				// proxyId: this.$route.query.id,
        // name:'',
        // status:'0',
        // balance:'',
        // protocol:'',
        // port:'',
        // detailsInfo:[{host:'',prot:'',maxConnect:''}],
			}
		}
	},
	mounted() {
		this.initPage();
	},
	methods: {
		listCommand(command, row, index) {
			if (command && this[command]) {
				this[command](row, index);
			}
		},

		initPage() {

			getFzInfo({
				id: this.id || "",
			}).then(ret => {
				this.pageData = ret.data

				this.initCardData();

				ret.data.ruleInfo.forEach(el => {
					el.ip = ret.data.host
				})
				this.$refs.zhuanfaList.initData(ret.data.ruleInfo);
//				this.$refs.log.initData({
//					id: ret.data.instId,
//				});

				this.addStatusListenner();
			})

		},
		initCardData() {
			let data = {};
			for (let i in this.pageData) {
				const _name = this.cardConifg[i]
				if (_name) {
					if (i == 'status') {
						data[_name] = {
							html: fuzaiStatusFilter(this.pageData[i])
						};
					} else {
						data[_name] = this.pageData[i];
					}
				}
			}
		
			this.cardData = data;
	},

	addStatusListenner() {
		const statusStatic = (status) => {
			// 是否是稳定状态
			const isStatic = !(fuzaiStatusFilter(status).indexOf("...") > -1);
			return isStatic;
		}
		if (!statusStatic(this.pageData.status)) {
			listenner({
				api: {
					serviceFN: getFzListStatus,
					params: [
						this.id,
					],
				},
				callBack: (ret) => {

					this.pageData.status = ret.data[0].status;

					this.initCardData();

//					this.$refs.log.initData({
//						id: this.pageData.instId,
//					});
					const status = statusStatic(this.pageData.status);
					this.$refs.pageLog.setStatusStatic(status)
					return status;
				},
			}, this)
		}
	},

	refresh() {
		this.initPage();
	},

	addZFPZ() {
		// this.ruleForm ={
		// 			proxyId: this.$route.query.id,
		// 			name:'',
		// 			status:'0',
		// 			balance:'',
		// 			protocol:'',
		// 			port:'',
		// 			status:false,
		// 			detailsInfo:[{host:'',prot:'',maxConnect:''}],
		// 		}
		this.$refs.addZFPZDialog.open().init();
	},
    //刷新日志
	handleReshLOG(){
			this.$refs.pageLog.initPage()
			this.$refs.pageLog.initData()
	},
	updateZFPZ(row, index) {
		console.log("编辑转发配置", row, index)
		// if(row.status == 1){
		// 	row.status = false
		// }else if(row.status == 0){
		// 	row.status = true
		// }
		// this.ruleForm = row
		// this.$refs.addZFPZDialog.open();
		this.$refs.addZFPZDialog.open().init(row);
	}

}
}
</script>

<style>
</style>